<template>
    <div class="task">
        <h2 class="tit">辅助工具</h2>
        <div class="pert">
            <p class="title">任务安排计算工具</p>
            <div class="cueBox">
                <div class="icon">
                    <img src="../../../assets/images/warning.png" alt="">
                </div>
                <div class="cue">
                    <span class="s1">使用说明</span>
                    <br />
                    <span class="s2">1. 计算规则：<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;俩个工作人员 = 1个工作通道
                        <br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;采集速度 * 效率系数 = 居民人数 / （工作时间  * 工作人数）
                    </span>
                    <br />
                    <span class="s2">2. 采集效率，系统会根据历史采集记录，给出参考值</span>
                </div>
            </div>
            <Form ref="formValidate" :model="formValidate" :label-width="85" label-position="left">
                <Row class="box" :gutter='32'>
                    <p class="txt">必填项</p>
                    <Col span="8">  
                        <FormItem label="设置采集速度（人 / 分钟）：" :label-width="170">
							<!-- <InputNumber class="w-select" v-model="formValidate.speed" placeholder="请输入数字" :min='0'></InputNumber> -->
                            <input min="0" max="999.99" v-model="formValidate.speed" type="number" @input="speedInput" class="inputnumber" placeholder="请输入数字"/>
						</FormItem>
                    </Col>
                    <Col span="8">  
                        <FormItem label="效率系数：" >
							<!-- <InputNumber class="w-select" v-model="formValidate.efficiency" placeholder="请输入数字" :min='0'></InputNumber> -->
                            <input min="0" max="999.99" v-model="formValidate.efficiency" type="number" @input="efficiencyInput" class="inputnumber" placeholder="请输入数字"/>
						</FormItem>
                    </Col>
                    <Col span="8">  
                        <FormItem :label-width="130">
							<Button type="primary" @click="calculate">
                                点击开始计算
                            </Button>
						</FormItem>
                    </Col>
                    <p class="txt">选填项（任选两项设置后，可自动计算出第三项）</p>
                    <Col span="8">  
                        <FormItem label="设置工作人数（人）：" :label-width="140">
							<!-- <InputNumber class="w-select" v-model="formValidate.workerNum" placeholder="请输入整数" :min='0'></InputNumber> -->
                            <input min="0" v-model="formValidate.workerNum" type="text" @input="workerNumInput" class="inputnumber" placeholder="请输入整数" />
						</FormItem>
                    </Col>
                    <Col span="8">  
                        <FormItem label="设置居民人数（人）：" :label-width="140">
							<!-- <InputNumber class="w-select" v-model="formValidate.residentNum" placeholder="请输入整数" :min='0'></InputNumber> -->
                            <input min="0" v-model="formValidate.residentNum" type="text" @input="residentNumInput" class="inputnumber" placeholder="请输入整数" />
						</FormItem>
                    </Col>
                    <Col span="8">  
                        <FormItem label="设置工作时间（分钟）：" :label-width="150">
							<!-- <InputNumber class="w-select" v-model="formValidate.workHour" placeholder="请输入数字" :min='0'></InputNumber> -->
                            <input min="0" max="999.99" v-model="formValidate.workHour" type="number" @input="workHourInput" class="inputnumber" placeholder="请输入数字"/>
						</FormItem>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="btnBox">
			<Button @click="back" class="btn">
				<i class = "iconfont icon-butongyi icon"></i>取消
			</Button>
		</div>
    </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            formValidate: {
				speed: '',
				efficiency: '',
				workerNum: '',
                residentNum: '',
                workHour: '',
      		},
        }
    },
    mounted() {
        this.getTaskSpeed()
    },
    methods: {
        speedInput(e) {
            this.formValidate.speed = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
            if(e.target.value>999.99)this.formValidate.speed=999.99
        },
        efficiencyInput(e) {
            this.formValidate.efficiency = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
            if(e.target.value>999.99)this.formValidate.efficiency=999.99
        },
        workerNumInput() {
            this.formValidate.workerNum=this.formValidate.workerNum.replace(/[^0-9]/g, '')
        },
        residentNumInput() {
            this.formValidate.residentNum=this.formValidate.residentNum.replace(/[^0-9]/g, '')
        },
        workHourInput(e) {
            this.formValidate.workHour = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
            if(e.target.value>999.99)this.formValidate.workHour=999.99
        },
        getTaskSpeed() {
            this.$axios
                .post(api.getTaskCollectSpeed, {})
                .then(resp => {
                    if (resp.data.success) { 
                        if(resp.data.message) {
                            this.formValidate.efficiency = resp.data.message;
                        } else {
                            this.formValidate.efficiency = ''
                        }                                      
                    } else {
                        this.formValidate.efficiency = ''
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    this.formValidate.efficiency = ''
                    console.log(err);
                });
        },
        calculate() {
            if(!this.formValidate.speed || !this.formValidate.efficiency) {
                this.$Message.error("请按规定操作!");
                return;
            }
            if(!this.formValidate.workerNum && !this.formValidate.residentNum) {
                this.$Message.error("请按规定操作!");
                return;
            }
            if(!this.formValidate.workerNum && !this.formValidate.workHour) {
                this.$Message.error("请按规定操作!");
                return;
            }
            if(!this.formValidate.residentNum && !this.formValidate.workHour) {
                this.$Message.error("请按规定操作!");
                return;
            }
            if(this.formValidate.workerNum && this.formValidate.residentNum && this.formValidate.workHour) {
                this.$Message.error("请按规定操作!");
                return;
            }
            if(!this.formValidate.workerNum) {
                this.formValidate.workerNum = this.formValidate.residentNum / (this.formValidate.speed * this.formValidate.efficiency) / this.formValidate.workHour
            }
            if(!this.formValidate.residentNum) {
                this.formValidate.residentNum = this.formValidate.speed * this.formValidate.efficiency * this.formValidate.workHour * this.formValidate.workerNum
            }
            if(!this.formValidate.workHour) {
                this.formValidate.workHour = this.formValidate.residentNum / (this.formValidate.speed * this.formValidate.efficiency) / this.formValidate.workerNum
            }
        },
        back() {
			this.functionJS.queryNavgationTo(
				this,
				"/index/nucleicacid/task/list",
				{
					pageNo: this.$route.query.pageNo,
				}
			);
		},
    },
}
</script>

<style scoped lang="less">
.task {
	width: calc(100%);
	padding: 10px 0px;
	margin: 0 auto;
	background: #fff;
	.w-select {
        width: 100px;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 20px 0;
		width: 99%;
    }
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}
    .pert {
		width: 97%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		margin-bottom: 20px;
		.title {
			font-size: 20px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
    	}
        .cueBox {
			background-color: #fdf6ec;
			display: flex;
			padding: 5px 0 5px 15px;
			margin-top: -20px;
			.icon {
				vertical-align: middle;
				margin-right: 15px;
				img {
					width: 35px;
					height: 35px;
				}
			}
			.cue {
				.s1 {
					color: #f5a300;
					font-weight: bold;
				}
				.s2 {
					color: #e6a057;
                    font-size: 12px;
				}
			}
		}
        .box{
			padding: 0 50px;
			.txt{
				font-size: 14px;
                color: #000;
                margin: 20px 0;
                font-weight: 600;
			}
		}
    }
    .btnBox {
        width: 100%;
        text-align: center;
        .btn {
            min-width: 75px;
            height: 35px;
            .icon {
                margin-right: 5px;
                font-size: 14px;
            }
        }
    }
    .inputnumber {
        width: 150px;
        background: #fff;
        border: none;
        outline: none;
        text-indent: 10px;
        line-height: 30px;
        border: 1px solid #ddd;
        border-radius: 4px;
        color: #666;
    }
    .inputnumber:focus{
        border-color:#5362e1
    }
}
</style>